<template>    
<!-- 主体内容 -->
    <div class="container">
        <div class="main-content">
            <!-- 中间面板 -->
             <div class="content">
                    <h1 class="content-title">联系我们(Contact Us)</h1>
                    <div class="contact-content">
                        <div class="contact-details">
                            <div class="company-name">广州莱比特物流服务有限公司</div>
                            <div class="company-name">GuangzhouLetbetterLogisticsServiceCo.,Ltd.</div>
                            
                            <div class="contact-info">
                                <p>
                                    <i class="fas fa-map-marker-alt icon"></i>
                                    <span class="strong">地址:</span> 
                                    广州市天河区黄村大道2号后座骏业商务中心五楼501&506室
                                </p>
                                <p>
                                    <i class="fas fa-phone icon"></i>
                                    <span class="strong">公司总机:</span> 
                                    020-82520288
                                </p>
                                <p>
                                    <i class="fas fa-fax icon"></i>
                                    <span class="strong">传真:</span> 
                                    020-82025757
                                </p>
                            </div>
                            
                            <div class="phone-group">
                                <h4><i class="fas fa-phone-volume icon"></i> 客服中心</h4>
                                <p>18925054642、18925084214</p>
                            </div>
                            
                            <div class="phone-group">
                                <h4><i class="fas fa-phone icon"></i> 公司总机</h4>
                                <p>020-82520288</p>
                                <h4 style="margin-top: 10px;"><i class="fas fa-headset icon"></i> 受理业务中心</h4>
                                <p>18925054642、18925084214</p>
                            </div>
                            
                            <div class="phone-group">
                                <h4><i class="fas fa-comments icon"></i> 服务投诉电话</h4>
                                <p>020-82520288、18925054642</p>
                                <h4 style="margin-top: 10px;"><i class="fas fa-cogs icon"></i> 运营操作中心</h4>
                                <p>18925053452</p>
                                <h4 style="margin-top: 10px;"><i class="fas fa-clock icon"></i> 24小时服务热线</h4>
                                <p>18925053452、18925054642</p>
                            </div>
                            
                            <div class="contact-info">
                                <p>
                                    <i class="fas fa-globe icon"></i>
                                    <span class="strong">网址:</span> 
                                    www.lbt56.cn
                                </p>
                                <p>
                                    <i class="fas fa-envelope icon"></i>
                                    <span class="strong">邮箱:</span> 
                                    lbtslzx@163.com
                                </p>
                            </div>
                        </div>
                        
                        <div class="contact-image">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='240' viewBox='0 0 300 240'%3E%3Crect fill='%23f0f0f0' width='300' height='240'/%3E%3Cg fill='%23cc0000' fill-opacity='0.2'%3E%3Crect x='50' y='30' width='200' height='180' rx='5'/%3E%3Ccircle cx='100' cy='70' r='20'/%3E%3Ccircle cx='200' cy='70' r='20'/%3E%3Crect x='90' y='120' width='120' height='10' rx='2'/%3E%3Crect x='80' y='150' width='140' height='10' rx='2'/%3E%3Crect x='70' y='180' width='160' height='10' rx='2'/%3E%3C/g%3E%3Ctext x='150' y='220' font-family='Arial' font-size='14' text-anchor='middle' fill='%23666'%3E办公环境示意图%3C/text%3E%3C/svg%3E" alt="办公环境">
                            <div class="image-caption">莱比特物流专业客服团队</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
	// import HeaderContent from '../components/HeaderComponent.vue'
	// import FooterContent from '../components/FooterComponent.vue'

	export default {
		name: 'ContactComp',
		// components: {
		// 	HeaderContent,
		// 	FooterContent
		// }
	}
</script>
<style scoped>
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
</style>

<style scoped>
.content {
            flex: 1;
            background-color: #fff;
            /* padding: 0 20px; */
			width: 55%;
    margin: 0% 24%;
        }
        
        .content-title {
            padding: 15px 0;
            font-size: 24px;
            font-weight: bold;
            color: #941C1B;
            border-bottom: 2px solid #941C1B;
            margin-bottom: 20px;
        }
        
        .contact-content {
            display: flex;
            gap: 30px;
        }
        
        .contact-details {
            flex: 1;
        }
        
        .company-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .contact-info {
            margin-bottom: 20px;
        }
        
        .contact-info p {
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
        }
        
        .contact-info .icon {
            min-width: 24px;
            color: #941C1B;
            margin-right: 8px;
        }
        
        .contact-info .strong {
            font-weight: bold;
            color: #941C1B;
            min-width: 110px;
            display: inline-block;
        }
        
        .phone-group {
            background-color: #f8f8f8;
            border-left: 3px solid #941C1B;
            padding: 15px;
            margin-top: 15px;
        }
        
        .phone-group h4 {
            margin-bottom: 10px;
            color: #941C1B;
        }
        
        .contact-image {
            flex: 0 0 300px;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            height: fit-content;
        }
        
        .contact-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .image-caption {
            padding: 10px;
            background-color: #f9f9f9;
            font-size: 14px;
            text-align: center;
            color: #666;
        }
</style>